
import { Button, Tooltip, Popover, Badge, Icon, Modal,Dropdown,Menu } from 'antd';
import { WeaColorPicker, WeaUpload, WeaBrowser, WeaLocaleProvider, WeaSelect } from 'ecCom';
import classNames from 'classnames';
import { each } from 'lodash';
import * as React from 'react';
import { BorderType } from '../../../constants/excel';
import Divider from '../../common/divider';
import DropSelect from '../../common/drop-select';
import * as CommonAction from './action/common';
import getCellTypeName from '../../../utils/getCellTypeName';
const getLabel = WeaLocaleProvider.getLabel;
export const fontFamilyOptions = ['宋体', '仿宋', '微软雅黑', '微软雅黑 Light', '新宋体', '楷体', '等线', '黑体',
    'Malgun Gothic', 'Malgun Gothic Semilight', 'Microsoft JhengHei', 'Microsoft JhengHei Light', 'Microsoft JhengHei UI',
    'Microsoft JhengHei UI Light', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', 'Calibri'];
const fontSizeArray = [];
for (let i = 5; i < 36; i++) {
    fontSizeArray.push(i * 2);
}
export const fontSizeOptions = fontSizeArray.map(d => ({
    id: '' + d,
    showname: '' + d
}));

export const lineArr = [
    { id: BorderType.Bottom, icon: 'icon-edc-common-border-bottom', showname: <div><i className="icon-edc-common-border-bottom mr-1" />{getLabel('505918', '下边框')}</div>, title: getLabel('505918', '下边框') },
    { id: BorderType.Top, icon: "icon-edc-common-border-top", showname: <div><i className="icon-edc-common-border-top  mr-1" />{getLabel('505919', '上边框')}</div>, title: getLabel('505919', '上边框') },
    { id: BorderType.Left, icon: 'icon-edc-common-border-left', showname: <div><i className="icon-edc-common-border-left  mr-1" />{getLabel('505920', '左边框')}</div>, title: getLabel('505920', '左边框') },
    { id: BorderType.Right, icon: "icon-edc-common-border-right", showname: <div><i className="icon-edc-common-border-right  mr-1" />{getLabel('505921', '右边框')}</div>, title: getLabel('505921', '右边框') },
    { id: BorderType.None, icon: "icon-edc-common-border-none", showname: <div><i className="icon-edc-common-border-none  mr-1" />{getLabel('505922', '无边框')}</div>, title: getLabel('505922', '无边框') },
    { id: BorderType.All, icon: "icon-edc-common-border-all", showname: <div><i className="icon-edc-common-border-all  mr-1" />{getLabel('505923', '所有框线')}</div>, title: getLabel('505923', '所有框线') },
    { id: BorderType.OutLine, icon: "icon-edc-common-border-outer", showname: <div><i className="icon-edc-common-border-outer  mr-1" />{getLabel('505924', '外侧框线')}</div>, title: getLabel('505924', '外侧框线') }

];
export const cellTypeOptions = [{
    id: 'empty',
    showname: <div> <div style={{ width: 17, border: '1px solid #eaeaea', height: 10, display: 'inline-block' }} /><span className="ml-1" >{getLabel('502326', '空')}</span></div>
}, {
    id: 'input',
    showname: <div><i className="icon-mode-input" style={{ fontSize: 16 }} /><span className="ml-1" >{getLabel('502327', '文本框')}</span></div>
}, {
    id: 'check',
    showname: <div><i className="icon-mode-checkbox" style={{ fontSize: 16 }} /><span className="ml-1" >{getLabel('502309', 'Check框')}</span></div>
}, {
    id: 'select',
    showname: <div> <i className="icon-mode-select" style={{ fontSize: 16 }} /><span className="ml-1" >{getLabel('502310', '下拉框')}</span></div>
}, {
    id: 'browser',
    showname: <div><i className="icon-mode-browser" style={{ fontSize: 16 }} /><span className="ml-1" >{getLabel('502308', '浏览框')}</span></div>
}];
const borders = [{
    icon: 'icon-edc-common-border-bottom',
    key: 'bottom',
    showname: getLabel('505918', '下边框')
}, {
    icon: 'icon-edc-common-border-top',
    key: 'top',
    showname: getLabel('505919', '上边框')
}, {
    icon: 'icon-edc-common-border-left',
    key: 'left',
    showname: getLabel('505920', '左边框')
}, {
    icon: 'icon-edc-common-border-right',
    key: 'right',
    showname: getLabel('505921', '右边框')
}, {
    icon: 'icon-edc-common-border-none',
    key: 'none',
    showname: getLabel('505922', '无边框')
}, {
    icon: 'icon-edc-common-border-all',
    key: 'all',
    showname: getLabel('521546','所有边框')
}, {
    icon: 'icon-edc-common-border-outer',
    key: 'outline',
    showname: getLabel('521547','外侧边框')
}];
const formatters = [{
    icon: 'icon-edc-common-shuzhi',
    key: '0.00_);[Red]\(0.00\)',
    key1: 'value',
    showname: getLabel('521042','数值')
}, {
    icon: 'icon-edc-common-biaoge-kaishi-changguipxxiala-changguipx',
    key: 'undefined',
    key1: 'common',
    showname: getLabel('521044','常规')
}, {
    icon: 'icon-edc-common-rmb-circle-o',
    key: '"￥"#,##0.00_);[Red]\("￥"#,##0.00\)',
    key1: 'huobi',
    showname: getLabel('521108','货币')
}, {
    icon: 'icon-edc-common-huiji',
    key: '_ "￥"* #,##0.00_ ;_ "￥"* \-#,##0.00_ ;_ "￥"* "-"??_ ;_ @_ ',
    key1: 'kuaiji',
    showname: getLabel('521109','会计专用')
}, {
    icon: 'icon-edc-common-riqi',
    key: 'yyyy/m/d;@',
    key1: 'shortdate',
    showname: getLabel('521552','短日期')
}, {
    icon: 'icon-edc-common-changriqi',
    key: 'yyyy"年"m"月"d"日";@',
    key1: 'longdate',
    showname: getLabel('521553','长日期')
}, {
    icon: 'icon-edc-common-shijian',
    key: 'h:mm:ss;@',
    key1: 'time',
    showname: getLabel('502541','时间')
}, {
    icon: 'icon-edc-common-biaoge-kaishi-changguipxxiala-baifenbipx',
    key: '0.00%',
    key1: 'percent',
    showname: getLabel('521110','百分比')
}, {
    icon: 'icon-edc-common-biaoge-kaishi-changguipxxiala-fenshupx',
    key: '#\ ?/?',
    key1: 'fenshu',
    showname: getLabel('521111','分数')
}, {
    icon: 'icon-edc-common-biaoge-kaishi-changguipxxiala-kexuejishupx',
    key: '0.00E+00',
    key1: 'kexuejishu',
    showname: getLabel('521548','科学记数')
}, {
    icon: 'icon-edc-common-wenben',
    key: '@',
    key1: 'text',
    showname: getLabel('502305','文本')
}, {
    icon: 'icon-edc-common-other',
    key: 'others',
    key1: 'custom',
    showname: getLabel('521549','其他数字格式')
}];
export default class TopTools extends React.Component {
    static defaultProps = {
        templateVisible: true,
        fieldVisible: true
    }
    constructor(props) {
        super(props);
        const formatter = props.formatter;
        const formatterType = props.formatterType;
        const fomatterInfo = this.getFormaterInfo(formatter, formatterType)
        this.state = {
            bold: props.bold,
            cellTypeName: props.cellTypeName,
            fontFamily: props.fontFamily,
            fontSize: props.fontSize,
            hAlign: props.hAlign,
            italic: props.italic,
            spanCell: props.spanCell,
            underline: props.underline,
            vAlign: props.vAlign,
            sheetAutoFit: props.sheetAutoFit,
            wordwrap: props.wordwrap,
            disabledSignFields: false,
            clearFieldDisabled: false,
            deleteTableDisabled: true,
            setFieldTypeDisabled: false,
            isAutoFillin: false,
            isAutoFillinDisabled: true,
            dataSourceList: [],
            autoFitSheetMap: {},
            formulaList: [],
            fieldAssignList: [],
            cusBrowserIds: '',
            cusBrowserType: '',
            isSingle: false,
            broTitle: '',
            commonChildCheckParams: props.commonChildCheckParams,
            fixedCell: props.fixedCell,
            gridlineVisible: props.gridlineVisible,
            rowColHeaderVisible: props.rowColHeaderVisible,
            formatter,
            formattericon: fomatterInfo.icon,
            formattershowname: fomatterInfo.showname
        }
        this.store = {
            setFieldType: this.changeCellType
        };
        each({ ...CommonAction }, (value, key) => {
            if (typeof value === 'function') {
                this[key] = value.bind(this);
            } else {
                this[key] = value;
            }
        });
    }
    componentWillReceiveProps(nextProps) {
        const formatter = nextProps.formatter;
        const formatterType = nextProps.formatterType;
        const fomatterInfo = this.getFormaterInfo(formatter, formatterType)
        this.setState({
            bold: nextProps.bold,
            cellTypeName: nextProps.cellTypeName,
            fontFamily: nextProps.fontFamily,
            fontSize: nextProps.fontSize,
            hAlign: nextProps.hAlign,
            italic: nextProps.italic,
            spanCell: nextProps.spanCell,
            underline: nextProps.underline,
            vAlign: nextProps.vAlign,
            wordwrap: nextProps.wordwrap,
            combineSameCell: nextProps.combineSameCell,
            combineSameCellDisabled: nextProps.combineSameCellDisabled,
            readonly: nextProps.readonly,
            disabledSignFields: nextProps.disabledSignFields,
            clearFieldDisabled: nextProps.clearFieldDisabled,
            deleteTableDisabled: nextProps.deleteTableDisabled,
            setFieldTypeDisabled: nextProps.setFieldTypeDisabled,
            isAutoFillin: nextProps.isAutoFillin,
            sheetAutoFit: nextProps.sheetAutoFit,
            isAutoFillinDisabled: nextProps.isAutoFillinDisabled,
            dataSourceList: nextProps.dataSourceList || [],
            formulaList: nextProps.formulaList || [],
            fieldAssignList: nextProps.fieldAssignList,
            commonChildCheckParams: nextProps.commonChildCheckParams,
            fixedCell: nextProps.fixedCell,
            gridlineVisible: nextProps.gridlineVisible,
            rowColHeaderVisible: nextProps.rowColHeaderVisible,
            formatter,
            formattericon: fomatterInfo.icon,
            formattershowname: fomatterInfo.showname
            
        });
    }
    shouldComponentUpdate(nextProps, nextState) {
        return this.state.backColor !== nextState.backColor
            || this.state.bold !== nextState.bold
            || this.state.formatpainter !== nextState.formatpainter
            || this.state.border !== nextState.border
            || this.state.fontFamily !== nextState.fontFamily
            || this.state.fontSize !== nextState.fontSize
            || this.state.foreColor !== nextState.foreColor
            || this.state.hAlign !== nextState.hAlign
            || this.state.italic !== nextState.italic
            || this.state.sheetAutoFit !== nextState.sheetAutoFit
            || this.state.spanCell !== nextState.spanCell
            || this.state.underline !== nextState.underline
            || this.state.vAlign !== nextState.vAlign
            || this.state.wordwrap !== nextState.wordwrap
            || this.state.cellTypeName !== nextState.cellTypeName
            || this.state.combineSameCell !== nextState.combineSameCell
            || this.state.combineSameCellDisabled !== nextState.combineSameCellDisabled
            || this.state.readonly !== nextState.readonly
            || this.state.disabledSignFields !== nextState.disabledSignFields
            || this.state.clearFieldDisabled !== nextState.clearFieldDisabled
            || this.state.deleteTableDisabled !== nextState.deleteTableDisabled
            || this.state.setFieldTypeDisabled !== nextState.setFieldTypeDisabled
            || this.state.isAutoFillin !== nextState.isAutoFillin
            || this.state.isAutoFillinDisabled !== nextState.isAutoFillinDisabled
            || this.state.dataSourceList !== nextState.dataSourceList
            || this.state.formulaList !== nextState.formulaList
            || this.state.fieldAssignList !== nextState.fieldAssignList
            || this.state.cusBrowserIds !== nextState.cusBrowserIds
            || this.state.cusBrowserType !== nextState.cusBrowserType
            || this.state.isSingle !== nextState.isSingle
            || this.state.broTitle !== nextState.broTitle
            || this.state.commonChildCheckParams !== nextState.commonChildCheckParams
            || this.state.fixedCell !== nextState.fixedCell
            || this.state.gridlineVisible !== nextState.gridlineVisible
            || this.state.rowColHeaderVisible !== nextState.rowColHeaderVisible
            || this.state.formatter !== nextState.formatter
            || this.state.formattericon !== nextState.formattericon
            || this.state.formattershowname !== nextState.formattershowname

    }
    openDataSource = (key) => {
        const { openDataSource } = this.props;
        if (typeof openDataSource === 'function') {
            openDataSource(key);
        }
    }
    openFieldAssign = (key) => {
        const { openFieldAssign } = this.props;
        if (typeof openFieldAssign === 'function') {
            openFieldAssign(key);
        }
    }

    deleteFieldAssign = (key) => {
        const { deleteFieldAssign } = this.props;
        if (typeof deleteFieldAssign === 'function') {
            deleteFieldAssign(key);
        }
    }

    deleteDataSource = (key) => {
        const { deleteDataSource } = this.props;
        if (typeof deleteDataSource === 'function') {
            deleteDataSource(key);
        }
    }

    render() {
        const { fontFamily, fontSize, bold, formatpainter, italic, underline, border, vAlign, hAlign, wordwrap, spanCell, cellTypeName, backColor, foreColor,
            combineSameCell, combineSameCellDisabled, readonly, disabledSignFields, clearFieldDisabled, deleteTableDisabled, setFieldTypeDisabled,
            isAutoFillin, isAutoFillinDisabled, dataSourceList = [], formulaList = [], fieldAssignList = [], commonChildCheckParams, autoFitSheetMap, sheetAutoFit,
            fixedCell,gridlineVisible,rowColHeaderVisible,formatter,formattericon,formattershowname} = this.state;
        const { browserTemplate, newPage, templateVisible, fieldVisible, deleteTable, addDataSource, openAceEditor, showContent, isformatpainter,
            browserAutoFillin, formulaVisible, deleteFormula, addFieldAssign, dsMenuVisible, dsShowMenu, faMenuVisible, faShowMenu } = this.props;
        let toolAreaStyle = readonly ? "none" : "auto";

        this.setState({
            formatpainter: isformatpainter
        });

        const lineArr = [
            { id: BorderType.Bottom, icon: 'icon-edc-common-border-bottom', showname: <div><i className="icon-edc-common-border-bottom mr-1" />{getLabel('505918', '下边框')}</div>, title: getLabel('505918', '下边框') },
            { id: BorderType.Top, icon: "icon-edc-common-border-top", showname: <div><i className="icon-edc-common-border-top  mr-1" />{getLabel('505919', '上边框')}</div>, title: getLabel('505919', '上边框') },
            { id: BorderType.Left, icon: 'icon-edc-common-border-left', showname: <div><i className="icon-edc-common-border-left  mr-1" />{getLabel('505920', '左边框')}</div>, title: getLabel('505920', '左边框') },
            { id: BorderType.Right, icon: "icon-edc-common-border-right", showname: <div><i className="icon-edc-common-border-right  mr-1" />{getLabel('505921', '右边框')}</div>, title: getLabel('505921', '右边框') },
            { id: BorderType.None, icon: "icon-edc-common-border-none", showname: <div><i className="icon-edc-common-border-none  mr-1" />{getLabel('505922', '无边框')}</div>, title: getLabel('505922', '无边框') },
            { id: BorderType.All, icon: "icon-edc-common-border-all", showname: <div><i className="icon-edc-common-border-all  mr-1" />{getLabel('505923', '所有框线')}</div>, title: getLabel('505923', '所有框线') },
            { id: BorderType.OutLine, icon: "icon-edc-common-border-outer", showname: <div><i className="icon-edc-common-border-outer  mr-1" />{getLabel('505924', '外侧框线')}</div>, title: getLabel('505924', '外侧框线') }

        ];
        const formattersLaber = [{
            icon: 'icon-edc-common-shuzhi',
            key: '0.00_);[Red]\(0.00\)',
            key1: 'value',
            showname: getLabel('521042','数值')
        }, {
            icon: 'icon-edc-common-biaoge-kaishi-changguipxxiala-changguipx',
            key: 'undefined',
            key1: 'common',
            showname: getLabel('521044','常规')
        }, {
            icon: 'icon-edc-common-rmb-circle-o',
            key: '"￥"#,##0.00_);[Red]\("￥"#,##0.00\)',
            key1: 'huobi',
            showname: getLabel('521108','货币')
        }, {
            icon: 'icon-edc-common-huiji',
            key: '_ "￥"* #,##0.00_ ;_ "￥"* \-#,##0.00_ ;_ "￥"* "-"??_ ;_ @_ ',
            key1: 'kuaiji',
            showname: getLabel('521109','会计专用')
        }, {
            icon: 'icon-edc-common-riqi',
            key: 'yyyy/m/d;@',
            key1: 'shortdate',
            showname: getLabel('521552','短日期')
        }, {
            icon: 'icon-edc-common-changriqi',
            key: 'yyyy"年"m"月"d"日";@',
            key1: 'longdate',
            showname: getLabel('521553','长日期')
        }, {
            icon: 'icon-edc-common-shijian',
            key: 'h:mm:ss;@',
            key1: 'time',
            showname: getLabel('502541','时间')
        }, {
            icon: 'icon-edc-common-biaoge-kaishi-changguipxxiala-baifenbipx',
            key: '0.00%',
            key1: 'percent',
            showname: getLabel('521110','百分比')
        }, {
            icon: 'icon-edc-common-biaoge-kaishi-changguipxxiala-fenshupx',
            key: '#\ ?/?',
            key1: 'fenshu',
            showname: getLabel('521111','分数')
        }, {
            icon: 'icon-edc-common-biaoge-kaishi-changguipxxiala-kexuejishupx',
            key: '0.00E+00',
            key1: 'kexuejishu',
            showname: getLabel('521548','科学记数')
        }, {
            icon: 'icon-edc-common-wenben',
            key: '@',
            key1: 'text',
            showname: getLabel('502305','文本')
        }, {
            icon: 'icon-edc-common-other',
            key: 'others',
            key1: 'custom',
            showname: getLabel('521549','其他数字格式')
        }];

        return (
            <div className="edc-workbook-tools" >
                {/* {templateVisible && [
                <WeaUpload
                    className="edc-toolbar-item"
                    uploadUrl="."
                    category='string'
                    maxUploadSize={0}
                    maxFilesNumber={1}
                    limitType='xlsx'
                    autoUpload={false}
                    getShowListDatas={this.getShowListDatas}
                >
                    <Button disabled={readonly} className="tool-btn tool-btn-large"><i className="icon-mode-file-excel" />{getLabel('502328', '本地Excel')}</Button>
                </WeaUpload>,
                    <Button disabled={readonly} className="tool-btn tool-btn-large" onClick={newPage}><i className="icon-mode-file-excel" />{getLabel('505908', '新建Excel')}</Button>,
                    <Button disabled={readonly} className="tool-btn tool-btn-large" onClick={browserTemplate}><i className="icon-coms02-Data-center" />{getLabel('502329', '选择模板')}</Button>,
                    
                    // dataSourceList.length > 0 ? <Popover
                    //     placement="bottomLeft"
                    //     trigger="click"
                    //     visible={dsMenuVisible}
                    //     onVisibleChange={dsShowMenu}
                    //     content={
                    //         <ul className="menu">
                    //             {dataSourceList.map(ds => (
                    //                 <li className="menu-item" title={ds.name}>
                    //                     <div className="text-elli" style={{ width: 160 }} onClick={this.openDataSource.bind(this, ds.uuid)}>
                    //                         {ds.name}
                    //                     </div>
                    //                     <div className="menu-item-opts"><Icon type="delete" onClick={this.deleteDataSource.bind(this, ds.uuid)} title={getLabel(502286, '删除')}></Icon></div></li>
                    //             ))}
                    //             <li style={{ textAlign: 'center' }} ><Button onClick={addDataSource} type="primary" icon="plus" shape="circle"></Button></li>
                    //         </ul>
                    //     }
                    // >

                    //     <Button disabled={readonly} className="tool-btn tool-btn-large" title={getLabel('502330', '数据源')}>
                    //         <Badge count={dataSourceList.length}>
                    //             <i title={getLabel('502330', '数据源')} className="icon-edc-common-database" />
                    //         </Badge>
                    //         <div>{getLabel('502330', '数据源')}</div>
                    //     </Button>
                    // </Popover> : <Button disabled={readonly} onClick={addDataSource} className="tool-btn tool-btn-large" title={getLabel('502330', '数据源')}>
                    //         <i className="icon-edc-common-database" />
                    //         <div>{getLabel('502330', '数据源')} </div>
                    //     </Button>
                    //     ,
                    
                    fieldAssignList.length > 0 ? <Popover
                        placement="bottomLeft"
                        trigger="click"
                        visible={faMenuVisible}
                        onVisibleChange={faShowMenu}
                        content={
                            <ul className="menu">
                                {fieldAssignList.map(fa => (
                                    <li className="menu-item" title={fa.name}>
                                        <div className="text-elli" style={{ width: 160 }} onClick={this.openFieldAssign.bind(this, fa.id)}>
                                            {fa.name}
                                        </div>
                                        <div className="menu-item-opts"><Icon type="delete" onClick={this.deleteFieldAssign.bind(this, fa.id)} title={getLabel(502286, '删除')}></Icon></div></li>
                                ))}
                                <li style={{ textAlign: 'center' }} ><Button onClick={addFieldAssign} type="primary" icon="plus" shape="circle"></Button></li>
                            </ul>
                        }
                    >

                        <Button disabled={readonly} className="tool-btn tool-btn-large" title={getLabel('507808', '字段赋值')}>
                            <Badge count={fieldAssignList.length}>
                                <i title={getLabel('507808', '字段赋值')} className="icon-edc-common-Console-SQL" />
                            </Badge>
                            <div>{getLabel('507808', '字段赋值')}</div>
                        </Button>
                    </Popover> : <Button disabled={readonly} onClick={addFieldAssign} className="tool-btn tool-btn-large" title={getLabel('507808', '字段赋值')}>
                            <i className="icon-edc-common-Console-SQL" />
                            <div>{getLabel('507808', '字段赋值')} </div>
                        </Button>,
                <Divider type="vertical" />]} */}
                {<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3anjvx`} onClick={this.changeFormatpainter} className={`tool-btn${formatpainter ? ' tool-btn-active' : ''}`} title={getLabel('512292', '格式刷')}>
                    <i style={{ fontSize: 18 }} className={isformatpainter ? "icon-edc-common-formatpainter-fill" : "icon-edc-common-formatpainter"} />
                    <div>{getLabel('512292', '格式刷')} </div>
                </Button>}
                {<Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@7lwsgy`} type="vertical" />}
                <div className="tool-area" style={{ pointerEvents: toolAreaStyle }}>
                    <div className="tool-area-row">
                        <DropSelect ecId={`${this && this.props && this.props.ecId || ''}_DropSelect@20eyyw`}
                            style={{ width: 130 }}
                            value={fontFamily}
                            onChange={this.changeFontFamily}
                            options={fontFamilyOptions.map(d => ({ id: d, showname: d }))}
                            valueToStyleName="fontFamily"
                        />
                        <DropSelect ecId={`${this && this.props && this.props.ecId || ''}_DropSelect@tmnfct`}
                            style={{ width: 52, marginLeft: -1 }}
                            bf="0px"
                            value={fontSize}
                            onChange={this.changeFontSize}
                            options={fontSizeOptions}
                        />
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wdykle`} onClick={this.upFontSize} className="tool-btn"><i className="icon-mode-font-size-up" /></Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bopvj3`} onClick={this.downFontSize} className="tool-btn"><i style={{ fontSize: 12 }} className="icon-mode-font-size-down" /></Button>
                    </div>
                    <div className="tool-area-row">
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@onqgde`} onClick={this.changeBold} className={`tool-btn${bold ? ' tool-btn-active' : ''}`}><i className="icon-coms-Bold" /></Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4xb4bk`} onClick={this.changeItalic} className={`tool-btn${italic ? ' tool-btn-active' : ''}`}><i className="icon-coms-Italic" /></Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xhtloi`} onClick={this.changeUnderline} className={`tool-btn${underline ? ' tool-btn-active' : ''}`}><i className="icon-coms-Underline" /></Button>
                        <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@p45vlx`} type="vertical" style={{ height: 16 }} />
                        <DropSelect ecId={`${this && this.props && this.props.ecId || ''}_DropSelect@nxrpxu`}
                            onChange={this.changeBorder}
                            options={lineArr}
                            dropWidth={100}
                            isBorder={true}
                            inputCom={
                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2sk30d`}
                                    onClick={this.changeBorder.bind(this, this.state.border, this.state.foreColor)}
                                    className="tool-btn mr-5">
                                    <i className={this.getBorder(border)} />
                                </Button>
                            }
                        />
                        <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@iyu9cr`} type="vertical" style={{ height: 16 }} />
                        <DropSelect ecId={`${this && this.props && this.props.ecId || ''}_DropSelect@odo2gg`}
                            dropWidth={100}
                            inputCom={<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ilq0l0`}
                                onClick={this.changeBackColor.bind(this, backColor)}
                                style={{ paddingBottom: 0, borderBottom: `5px solid ${backColor}`, fontSize: 12 }}
                                className="tool-btn"><i className="icon-mode-backcolor" /></Button>}
                            dropCom={<WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@ut4yuk`}
                                customized={true}
                                onChange={this.changeBackColor}
                            >
                                <div className="toggle-icon-button mf-5">
                                    <i className="icon-coms-down2" />
                                </div>
                            </WeaColorPicker>}
                        />

                        <DropSelect ecId={`${this && this.props && this.props.ecId || ''}_DropSelect@cqoo9s`}
                            onChange={this.changeBorder}
                            options={lineArr}
                            dropWidth={100}
                            inputCom={<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@hxtltc`} title={getLabel('512712', '字体颜色和边框颜色')} placement={'bottom'}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bfk8jw`}
                                onClick={this.changeForeColor.bind(this, foreColor)}
                                style={{ paddingBottom: 0, borderBottom: `5px solid ${foreColor}`, fontSize: 12 }}
                                className="tool-btn"><i className="icon-coms-text" /></Button></Tooltip>}
                            dropCom={<WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@8t4yy4`}
                                customized={true}
                                onChange={this.changeForeColor}
                            >
                                <div className="toggle-icon-button mf-5">
                                    <i className="icon-coms-down2" />
                                </div>
                            </WeaColorPicker>}
                        />
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel('505909', '字体')}</div>
                </div>
                <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@5ub4ux`} type="vertical" />
                <div className="tool-area" style={{ pointerEvents: toolAreaStyle }}>
                    <div className="tool-area-row">
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vwoq98`} onClick={this.changeVAlign.bind(this, GC.Spread.Sheets.VerticalAlign.top)} className={`tool-btn${vAlign === GC.Spread.Sheets.VerticalAlign.top ? ' tool-btn-active' : ''}`} style={{ paddingBottom: 10, paddingTop: 0 }}><i className="icon-mode-align-middle" /></Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lmd9qf`} onClick={this.changeVAlign.bind(this, GC.Spread.Sheets.VerticalAlign.center)} className={`tool-btn${vAlign === GC.Spread.Sheets.VerticalAlign.center ? ' tool-btn-active' : ''}`}><i className="icon-mode-align-middle" /></Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xfon7a`} onClick={this.changeVAlign.bind(this, GC.Spread.Sheets.VerticalAlign.bottom)} className={`tool-btn${vAlign === GC.Spread.Sheets.VerticalAlign.bottom ? ' tool-btn-active' : ''}`} style={{ paddingBottom: 0, paddingTop: 10 }}><i className="icon-mode-align-middle" /></Button>
                    </div>
                    <div className="tool-area-row">
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@f5xxz5`} onClick={this.changeHAlign.bind(this, GC.Spread.Sheets.HorizontalAlign.left)} className={`tool-btn${hAlign === GC.Spread.Sheets.HorizontalAlign.left ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-left" /></Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nkb4yo`} onClick={this.changeHAlign.bind(this, GC.Spread.Sheets.HorizontalAlign.center)} className={`tool-btn${hAlign === GC.Spread.Sheets.HorizontalAlign.center ? ' tool-btn-active' : ''}`}><i className="icon-mode-align-center" /></Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@up3rsc`} onClick={this.changeHAlign.bind(this, GC.Spread.Sheets.HorizontalAlign.right)} className={`tool-btn${hAlign === GC.Spread.Sheets.HorizontalAlign.right ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-right" /></Button>
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel('502331', '对齐方式')}</div>
                </div>
                <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@qdyqup`} type="vertical" />
                <div className="tool-area" style={{ pointerEvents: toolAreaStyle }}>
                    <div className="tool-area-row">
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@ixohwj`} title={wordwrap ? getLabel('505927', '取消自动换行') : getLabel('505928', '自动换行')}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vet35m`}
                                onClick={this.changeWorkWrap}
                                className={`tool-btn${wordwrap ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-mode-wordwrap" />
                            </Button>
                        </Tooltip>

                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@ivz1sy`} title={fixedCell ? getLabel('528623','取消冻结单元格')  : getLabel('528617','冻结单元格') }>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jo83nr`}
                                onClick={this.changeFixedCell}
                                className={`tool-btn${fixedCell ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-edc-common-lock" />
                            </Button>
                        </Tooltip>

                        <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@7wik40`}
                            className="edc-app-excel-header-upload"
                            uploadUrl="."
                            category='string'
                            maxUploadSize={0}
                            maxFilesNumber={1}
                            limitType='jpg,gif,png'
                            autoUpload={false}
                            getShowListDatas={this.insertBackGroundImage}
                        >
                            <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@nk6hbp`} title={getLabel('528621','背景图片') }>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ueq9h8`}
                                className={`tool-btn${0 ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-edc-common-image" />
                            </Button>
                            </Tooltip>
                        </WeaUpload>
                        <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@hau8cp`}
                            className="edc-app-excel-header-btn"
                            overlay={(
                                <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@mu5256`} onClick={this.setBackGroundImageLayout} className="edc-app-excel-header-dropmenu">
    
                                    {[{ key: 0, title: getLabel('386584','拉伸') }, { key: 1, title: getLabel('16203','居中') }, { key: 2, title: getLabel('526548','缩放') }, { key: 3, title: getLabel('81767','原始尺寸') },{key:'delete', title:getLabel('502286', '删除')}].map(border => (
                                        <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@9stlge@${border.key}`} key={border.key}>
                                            <span>{border.title}</span>
                                        </Menu.Item>
                                    ))}
                                </Menu>
                            )}
                        >
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@32akfn`} className={classNames("edc-app-excel-header-btn")}>
                                <i style={{ marginTop: -3 }} className="anticon anticon-down"></i>
                            </Button>
                        </Dropdown>


                    </div>
                    <div className="tool-area-row">
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@p9hb1e`} title={spanCell ? getLabel('505929', '拆分单元格') : getLabel('505930', '合并单元格')} placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8nwh53`}
                                onClick={this.changeSpanCell}
                                className={`tool-btn${spanCell ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-mode-combine-cell" />
                            </Button>
                        </Tooltip>

                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@k97nx0`} title={gridlineVisible ?getLabel('528618','隐藏网格线') : getLabel('528619','显示网格线') } placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@079vkf`}
                                onClick={this.setGridlineVisible}
                                className={`tool-btn${gridlineVisible ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-edc-common-table" />
                            </Button>
                        </Tooltip>

                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@itemki`} title={rowColHeaderVisible ? getLabel('528622','隐藏行号列头')  : getLabel('528620','显示行号列头') } placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@emnq2d`}
                                onClick={this.setRowColVisible}
                                className={`tool-btn${rowColHeaderVisible ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-edc-common-orderedlist"/>
                            </Button>
                        </Tooltip>

                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel('502335', '显示设置')}</div>
                </div>
                <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@uyuntb`} type="vertical" />
                <div className="tool-area" style={{ pointerEvents: toolAreaStyle }}>
                    <div className="tool-area-row" style={{height:'61px'}}>
                        <div>
                            <Dropdown.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@podoqt`}
                                className="edc-app-excel-header-btn"
                                overlay={(
                                    <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@dh9x91`} onClick={(value) => this.setFormatters(value)} className="edc-app-excel-header-dropformattermenu">
                                        {formattersLaber.map(border => (
                                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@lot1qp@${border.key}`} key={border.key}>
                                                <i className={border.icon} />
                                                <span>{border.showname}</span>
                                            </Menu.Item>
                                        ))}
                                    </Menu>
                                )}
                            >
                                <i className={formattericon}></i>
                                <span style={{ verticalAlign: "top" }}>{formattershowname === getLabel('521549','其他数字格式') ? getLabel('502465', '自定义') : formattershowname}</span>
                            </Dropdown.Button>
                        </div>
                        <div>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ikt1rm`}
                                onClick={() => this.setFormatters({ 'key': '"￥"#,##0.00_);[Red]\("￥"#,##0.00\)', 'key1': ['huobi'] })}
                                title={getLabel('521108','货币')}
                                className={classNames("edc-app-excel-header-btn", { active: formatter === '"￥"#,##0.00_);[Red]\("￥"#,##0.00\)' })}
                            >
                                <i className="icon-edc-common-rmb-circle-o" />
                            </Button>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jc9ate`}
                                onClick={() => this.setFormatters({ 'key': '0.00%', 'key1': ['percent'] })}
                                title={getLabel('521110','百分比')}
                                className={classNames("edc-app-excel-header-btn", { active: formatter === '0.00%' })}
                            >
                                <i className="icon-edc-common-biaoge-kaishi-changguipxxiala-baifenbipx" />
                            </Button>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v2hjjd`}
                                onClick={() => this.setFormatters({ 'key': '0.00_);[Red]\(0.00\)', 'key1': ['value'] })}
                                title={getLabel('521042','数值')}
                                className={classNames("edc-app-excel-header-btn", { active: formatter === '0.00_);[Red]\(0.00\)' })}
                            >
                                <i className="icon-edc-common-shuzhi" />
                            </Button>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ug10s0`}
                                onClick={() => this.setFormatters({ 'key': '@', 'key1': ['text'] })}
                                title={getLabel('502305','文本')}
                                className={classNames("edc-app-excel-header-btn", { active: formatter === '@' })}
                            >
                                <i className="icon-edc-common-wenben" />
                            </Button>
                        </div>
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel('527405','单元格格式') }</div>
                </div>
                <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@q6qbyw`} type="vertical" />
                {fieldVisible && [!setFieldTypeDisabled && <div className="tool-area" style={{ pointerEvents: toolAreaStyle }}>
                    <div className="tool-area-row">
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@w15xt8@`} title={getLabel('521550','单行文本')}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4n4s3g@`} disabled={setFieldTypeDisabled} onClick={this.setInputTextField} className={`tool-btn${cellTypeName === 'text' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-text" /></Button>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@20a6nc@`} title={getLabel('521551','多行文本')}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@t2d1vl@`} disabled={setFieldTypeDisabled} onClick={this.setInputLongTextField} className={`tool-btn${cellTypeName === 'longText' ? ' tool-btn-active' : ''}`} ><i className="icon-coms02-Set-dimension" /></Button>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@xq6mcl@`} title={getLabel('502306', '整数')}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dj8gd2@`} disabled={setFieldTypeDisabled} onClick={this.setInputIntField} className={`tool-btn${cellTypeName === 'int' ? ' tool-btn-active' : ''}`}><i style={{ marginTop: -10, fontSize: 16, marginBottom: -2 }} >0</i></Button>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@teif4p@`} title={getLabel('502307', '浮点数')}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lkj5n7@`} disabled={setFieldTypeDisabled} onClick={this.setInputFloatField} className={`tool-btn${cellTypeName === 'float' ? ' tool-btn-active' : ''}`}  ><i style={{ marginTop: -10, fontSize: 16, marginBottom: -2 }}>0.1</i></Button>
                        </Tooltip>
                        <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@sjojl3@`} type="vertical" style={{ height: 16 }} />
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@jbpmzb@`} title={getLabel('502309', 'Check框')}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dg4xjp@$`} disabled={setFieldTypeDisabled} onClick={this.setCheckField} className={`tool-btn${cellTypeName === 'check' ? ' tool-btn-active' : ''}`}><i className="icon-coms-batch" /></Button>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@qdjqjr@`} title={getLabel('502310', '下拉框')}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tk7le8@`} disabled={setFieldTypeDisabled} onClick={this.setSelectField} className={`tool-btn${cellTypeName === 'select' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-down" /></Button>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@o6edct@$`} title={getLabel('513507', '上传图片')}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bfd7s8@$`} disabled={setFieldTypeDisabled} onClick={this.setPicField} className={`tool-btn${cellTypeName === 'image' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-pic" /></Button>
                        </Tooltip>
                    </div>
                    <div className="tool-area-row">
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@scskaa@$`} title={getLabel('502300', '人力资源')} placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@598ovm@`} disabled={setFieldTypeDisabled} onClick={this.setBrowserHrmField} className={`tool-btn${cellTypeName === 'browser1' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-HumanResources" /></Button>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@fbz07u@`} title={getLabel('502298', '部门')} placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sv4878@`} disabled={setFieldTypeDisabled} onClick={this.setBrowserDptField} className={`tool-btn${cellTypeName === 'browser4' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-Headquarters" /></Button>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@40o10m@`} title={getLabel('502299', '分部')} placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pronw4@`} disabled={setFieldTypeDisabled} onClick={this.setBrowserSubCompanyField} className={`tool-btn${cellTypeName === 'browser164' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-LargeArea" /></Button>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@xt24gc@`} title={getLabel('502297', '日期')} placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sfvlqt@`} disabled={setFieldTypeDisabled} onClick={this.setBrowserDateField} className={`tool-btn${cellTypeName === 'browser2' ? ' tool-btn-active' : ''}`}  ><i className="icon-coms-New-schedule" /></Button>
                        </Tooltip>

                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@y7p1kn@`} title={getLabel('502308', '浏览框')} placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tb86br@`} className="tool-btn" disabled={setFieldTypeDisabled} onClick={this.showBrowserInstance} onBlur={this.hideBrowserInstance()}>
                                <i className="icon-coms-search" />
                            </Button>
                            {/*  <Button className="tool-btn" disabled={setFieldTypeDisabled} onClick={this.showBrowserInstance}>
                                <i className="icon-coms-search" />
                                <WeaBrowser onChange={this.setBrowserField} style={{ display: 'none' }} ref={ref => this.browserInstance = ref} type="browserTypeList" />
                            </Button> */}
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@jc3uub@`} title={getLabel('513505', '公共选择框')} placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1uhsxs@`} className="tool-btn" disabled={setFieldTypeDisabled} onClick={this.chooseCommonCheckType}
                                className={`tool-btn${cellTypeName === 'browserfieldCommonCheck' || cellTypeName === 'browserfieldCommonChildCheck' ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-coms02-Full-selection" />
                            </Button>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@tvjsat@`} title={getLabel('513508', '自适应行高')} placement={'bottom'}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3brjx9@`} className="tool-btn" disabled={false} onClick={this.setAutoFitSheetMap}
                                className={`tool-btn${sheetAutoFit ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-coms02-Row-height" />
                            </Button>
                        </Tooltip>
                        {/* <Tooltip title={'上传附件'} placement={'bottom'}>
                            <Button className="tool-btn" 
                                disabled={setFieldTypeDisabled} 
                                onClick={this.setFileField}
                                className={`tool-btn${cellTypeName === 'file' ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-coms-currency-Enclosure" />
                            </Button>
                        </Tooltip> */}

                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@jb8lsp@`} onChange={this.setCommonCheckBrowser} type="fieldCommonCheck" customized={true} hasAdvanceSerach={true} title={getLabel('513505', '公共选择框')} icon='icon-coms-workflow' ref={ref => this.commonCheckBrowser = ref} />
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@1ymypy@`} onChange={this.setCommonChildCheckBrowser} type="fieldCommonChildCheck" customized={true} hasAdvanceSerach={true} title={getLabel('513506', '公共选择框子项')} icon='icon-coms-workflow' ref={ref => this.commonChildCheckBrowser = ref} dataParams={commonChildCheckParams} />
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@zjazah@`} onChange={this.beforeSetBrowserField} hideSearch={true} ref={ref => this.browserInstance = ref} type="browserTypeList" />
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@k5islb@`} onChange={this.beforesetCusBrowserField} ref={ref => this.cusBrowserInstance = ref}
                            type={this.state.cusBrowserType} hasAdvanceSerach title={this.state.broTitle} inputStyle={{ display: "none" }} isSingle={this.state.isSingle} />
                        {/* <Button onClick={this.changeCellType.bind(this, 'empty')} className={`tool-btn${cellTypeName === 'empty' ? ' tool-btn-active' : ''}`}><div style={{ width: 17, marginBottom: 1, border: '1px solid #eaeaea', height: 10, display: 'inline-block' }} /></Button>
                        <Button onClick={this.changeCellType.bind(this, 'input')} className={`tool-btn${cellTypeName === 'input' ? ' tool-btn-active' : ''}`}><i style={{ fontSize: 24 }} className="icon-mode-input" /></Button>
                        <Button onClick={this.changeCellType.bind(this, 'check')} className={`tool-btn${cellTypeName === 'check' ? ' tool-btn-active' : ''}`}><i style={{ fontSize: 24 }} className="icon-mode-checkbox" /></Button>
                        <Button onClick={this.changeCellType.bind(this, 'select')} className={`tool-btn${cellTypeName === 'select' ? ' tool-btn-active' : ''}`}><i style={{ fontSize: 24 }} className="icon-mode-select" /></Button>
                        <Button onClick={this.changeCellType.bind(this, 'browser')} className={`tool-btn${cellTypeName === 'browser' ? ' tool-btn-active' : ''}`}><i style={{ fontSize: 24 }} className="icon-mode-browser" /></Button> */}
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel('502332', '字段设置')}</div>
                </div>,
                !setFieldTypeDisabled && <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@y1mxmh@`} type="vertical" />,
                (!combineSameCellDisabled || (!combineSameCellDisabled && !isAutoFillinDisabled)) && <div className="tool-area" style={{ pointerEvents: toolAreaStyle }}>
                    <div className="tool-area-row">
                        {!combineSameCellDisabled && <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@aul8in@`} title={getLabel('502333', '合并显示')}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2ujvnf@`} onClick={this.setCellTypeProps.bind(this, 'combineSameCell', !combineSameCell)} className={`tool-btn${combineSameCell ? ' tool-btn-active' : ''}`} >
                                <i className="icon-mode-merge f14"></i>
                            </Button>
                        </Tooltip>}
                        {!combineSameCellDisabled && !isAutoFillinDisabled && <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@zf3ieu@`} title={getLabel('502334', '固定解析')} >
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1pchuc@`}
                                onClick={this.setAutoFillin}
                                className={`tool-btn${isAutoFillin ? ' tool-btn-active' : ''}`} >
                                <i className="icon-edc-common-orderedlist"></i>
                            </Button>
                        </Tooltip>}
                    </div>
                    <div className="tool-area-row">
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@33jbus@`} className="tool-btn">&nbsp;</Button>
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>
                        {getLabel('502335', '显示设置')}
                    </div>
                </div>,
                (!combineSameCellDisabled || (!combineSameCellDisabled && !isAutoFillinDisabled)) && <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@arpsdv@`} type="vertical" />,
                clearFieldDisabled ? null : <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mbkde4@`} disabled={readonly} className="tool-btn tool-btn-large" onClick={this.props.clearContent} ><i className="icon-mode-delete" />{getLabel('502336', '清除字段')}</Button>,
                deleteTableDisabled ? null : <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@cluqhc@`} disabled={readonly} className="tool-btn tool-btn-large" onClick={deleteTable} ><i className="icon-mode-delete" />{getLabel('502337', '删除明细表')}</Button>,
                disabledSignFields ? null : <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ual5pp@`} disabled={readonly} onClick={this.props.signFields} className="tool-btn tool-btn-large"><i className="icon-coms-Sign" />{getLabel('502338', '识别字段')}</Button>,
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kgwcy7@`} disabled={readonly} onClick={this.props.addDetailTable} className="tool-btn tool-btn-large"><i className="icon-mode-detail" />{getLabel('502339', '添加明细')}</Button>,
                    // <Button onClick={this.props.addNoDetailTable} className="tool-btn tool-btn-large"><i className="icon-mode-detail" />添加留白</Button>
                ]}
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ofanbr`} disabled={readonly} onClick={this.props.expandCell} className="tool-btn tool-btn-large" ><i className="icon-mode-column-width" />{getLabel('502311', '扩展表格')}</Button>
                {<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@uob35i`} title={getLabel('514580', '把所选择的区域设置为自定义明细表区域')} placement={'bottom'}>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jizt9h`} disabled={readonly} onClick={this.props.addCustomTable} className="tool-btn tool-btn-large" ><i className="icon-mode-detail" />{getLabel('509263', '自定义明细表')}</Button>
                </Tooltip>}
                <Divider ecId={`${this && this.props && this.props.ecId || ''}_Divider@3043ww`} type="vertical" />
                {/* {formulaList.length > 0 ? <Popover
                    placement="bottomLeft"
                    trigger="click"
                    visible={formulaVisible}
                    onVisibleChange={showContent}
                    content={
                        <ul className="menu">
                            {formulaList.map(fu => (
                                <li className="menu-item" title={fu.describes}>
                                    <div className="text-elli" style={{ width: 160 }} onClick={() => { openAceEditor(fu) }}>
                                        {fu.describes}
                                    </div>
                                    <div className="menu-item-opts"><Icon type="delete" onClick={() => { deleteFormula(fu) }} title={getLabel(502286, '删除')}></Icon></div></li>
                            ))}
                            <li style={{ textAlign: 'center' }} ><Button onClick={openAceEditor} type="primary" icon="plus" shape="circle"></Button></li>
                        </ul>
                    }
                >

                    <Button disabled={readonly} className="tool-btn tool-btn-large" title={getLabel('502403', '自定义公式')}>
                        <Badge count={formulaList.length} style={{zIndex:0,top:"-9px"}}>
                            <i title={getLabel('502403', '自定义公式')} className="icon-coms-html2" />
                        </Badge>
                        <div>{getLabel('502403', '自定义公式')}</div>
                    </Button>
                </Popover> : <Button disabled={readonly} onClick={openAceEditor} className="tool-btn tool-btn-large" title={getLabel('502403', '自定义公式')}>
                        <i className="icon-coms-html2" />
                        <div>{getLabel('502403', '自定义公式')}</div>
                    </Button>} */}

            </div >
        )
    }

    beforeSetBrowserField = (ids, names, valueObj) => {

        const { cusBrowserType, isSingle, broTitle } = this.state;
        if (ids == 161 || ids == 162) {
            this.setState({
                cusBrowserObjs: valueObj,
                cusBrowserType: "userDefindBrowserType",
                isSingle: true,
                broTitle: names,
            }, () => {
                if (this.cusBrowserInstance) {
                    this.cusBrowserInstance.openModal();
                }
            });

        } else if (ids == 256 || ids == 257) {
            this.setState({
                cusBrowserObjs: valueObj,
                cusBrowserType: "formmodeTreeData",
                isSingle: true,
                broTitle: names,
            }, () => {
                if (this.cusBrowserInstance) {
                    this.cusBrowserInstance.openModal();
                }
            });
        } else {
            this.setBrowserField(valueObj);
        }
    }

    beforesetCusBrowserField = (ids, names, valueObj) => {
        this.setBrowserField(this.state.cusBrowserObjs, valueObj);
    }
    showBrowserInstance = () => {
        if (this.browserInstance) {
            this.browserInstance.openModal();
        }
    }
    // 隐藏浏览框
    hideBrowserInstance = () => {
        if (this.browserInstance) {
            this.browserInstance.closeModal();
        }
    }

    chooseCommonCheckType = () => {
        const { cellTypeName } = this.state;
        this.commonCheckType = cellTypeName === 'browserfieldCommonCheck' ? "1" : cellTypeName === 'browserfieldCommonChildCheck' ? "2" : "1";
        return Modal.confirm({
            content: (
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@3d4dz7`}
                    options={[{ key: "1", showname: getLabel('513505', '公共选择框') }, { key: "2", showname: getLabel('513506', '公共选择框子项') }]}
                    detailtype={3}
                    value={this.commonCheckType}
                    onChange={v => { this.commonCheckType = v }}
                />
            ),
            onOk: () => this.showCommonCheckBrowser(this.commonCheckType)
        });
    }

    showCommonCheckBrowser = (commonCheckType) => {
        if (commonCheckType === '1' && this.commonCheckBrowser) this.commonCheckBrowser.openModal();//公共选择框
        if (commonCheckType === '2' && this.commonChildCheckBrowser) this.commonChildCheckBrowser.openModal();//公共选择框子项
    }

    setCommonCheckBrowser = (ids, names, valueObj) => {
        this.setCommonCheck('fieldCommonCheck', valueObj);
    }

    setCommonChildCheckBrowser = (ids, names, valueObj) => {
        this.setCommonCheck('fieldCommonChildCheck', valueObj);
    }

    setAutoFillin = () => {
        let { isAutoFillin, cellTypeName } = this.state;
        let { browserAutoFillin } = this.props;

        if (cellTypeName.indexOf("browser") == 0 && cellTypeName != 'browserfieldCommonCheck' && cellTypeName != 'browserfieldCommonChildCheck') {
            this.props.setFillInData(!isAutoFillin);
        } else {
            this.props.setSelectFillIn();
        }
    }
    setCellTypeProps = (key, value) => {
        this.setState({
            [key]: value
        }, () => {
            if (this.props.setCellTypeProps) {
                this.props.setCellTypeProps(key, value)
            }
        });
    }
    getShowListDatas = (oldFields, newFields) => {
        const [file] = newFields;
        if (file) {
            const fileInstance = file.getNative();
            if (typeof this.props.importFile === 'function') {
                this.props.importFile(fileInstance);
            }
        }
    }
    changeCellType = (fieldType) => {
        const cellTypeName = getCellTypeName(fieldType);
        this.setState({
            cellTypeName
        }, () => {
            if (typeof this.props.onChangeCellType === 'function') {
                this.props.onChangeCellType(fieldType);
            }
        })
    }
    changeSpanCell = () => {
        const value = !this.state.spanCell;
        this.setState({ spanCell: value }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ cellSpan: value });
            }
        });
    }
    changeWorkWrap = () => {
        const value = !this.state.wordwrap;
        this.setState({ wordwrap: value }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ wordwrap: value });
            }
        });
    }
    changeFixedCell = () => {
        const value = !this.state.fixedCell;
        this.setState({ fixedCell: value }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ fixedCell: value });
            }
        });
    }
    changeHAlign = (hAlign) => {
        this.setState({ hAlign }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ hAlign });
            }
        });
    }
    changeVAlign = (vAlign) => {
        this.setState({ vAlign }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ vAlign });
            }
        });
    }
    changeForeColor = (foreColor) => {
        this.setState({
            foreColor
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ foreColor });
            }
        })
    }
    changeBackColor = (backColor) => {
        this.setState({
            backColor
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ backColor });
            }
        })
    }
    getBorder = (border = BorderType.None) => {
        let icon = 'icon-mode-wubiankuang';
        lineArr.forEach(d => {
            if (d.id === border) {
                icon = d.icon;
            }
        })
        return icon;
    }
    changeBorder = (border) => {
        const foreColor = this.state.foreColor;
        this.setState({
            border
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ border: border + '@' + foreColor });
            }
        });
    }
    changeUnderline = () => {
        const value = !this.state.underline;
        this.setState({
            underline: value
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ underline: value ? 'underline' : '' });
            }
        });
    }
    changeBold = () => {
        const value = !this.state.bold;
        this.setState({
            bold: value
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ bold: value ? 'bold' : '' });
            }
        });
    }
    changeItalic = () => {
        const value = !this.state.italic;
        this.setState({
            italic: value
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ italic: value ? 'italic' : '' });
            }
        });
    }
    changeFontSize = (fontSize) => {
        this.setState({
            fontSize
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ fontSize });
            }
        })
    }
    upFontSize = () => {
        let fontSize = Number(this.state.fontSize) + 1;
        if (fontSize > 70) {
            fontSize = 70;
        }
        this.setState({
            fontSize
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ fontSize });
            }
        })
    }

    downFontSize = () => {
        let fontSize = this.state.fontSize - 1;
        if (fontSize < 10) {
            fontSize = 10;
        }

        this.setState({
            fontSize
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ fontSize });
            }
        })
    }

    changeFontFamily = (fontFamily) => {
        this.setState({
            fontFamily
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ fontFamily });
            }
        })
    }

    changeFormatpainter = () => {
        // const value = !this.state.formatpainter;
        // this.setState({
        //     formatpainter: value
        // }, () => {
        if (typeof this.props.onChange === 'function') {
            this.props.changeFormatpainter(this.state.formatpainter);
        }
        // })


    }
    setAutoFitSheetMap = () => {
        if (typeof this.props.onChange === 'function') {
            this.props.changeSheetAutoFit(this.state.formatpainter);
        }
    }

    setGridlineVisible = () => {
        const newVisible = !this.state.gridlineVisible;
        this.setState({
            gridlineVisible: newVisible
        });
        const { setGridline } = this.props;
        if (setGridline) {
            setGridline(newVisible);
        }
    }
    setRowColVisible = () => {
        const newVisible = !this.state.rowColHeaderVisible;
        this.setState({
            rowColHeaderVisible: newVisible
        });
        const { setRowColHeaderVisible } = this.props;
        if (setRowColHeaderVisible) {
            setRowColHeaderVisible(newVisible);
        }
    }
    insertBackGroundImage = (oldfields, newFields) => {
        const [file] = newFields;
        if (file) {
            const fileInstance = file.getNative();
            const reader = new FileReader();
            reader.onloadend = (ev) => {
                const img = (ev.target).result;
                if (img) {
                    if (this.props.setBackGroundImage) {
                        this.props.setBackGroundImage(img)
                    }
                }
            }
            reader.readAsDataURL(fileInstance);
        }
    }
    setBackGroundImageLayout = ({key}) => {
        if ('delete' === key) {
            if (this.props.setBackGroundImage) {
                this.props.setBackGroundImage('');
            }
        } else if (this.props.setBackGroundImageLayout) {
            this.props.setBackGroundImageLayout(parseInt(key))
        }
    }
    setFormatters = (info) => {
        const formatter = info.key;
        let formatterType = info.key1;
        const { toggleFormatterSettingDialog } = this.props;
        if (formatter === 'others') {
            toggleFormatterSettingDialog(true);
        } else if (typeof this.props.onChange === 'function') {
            const formatterInfo = this.getFormaterInfo(formatter, []);
            if (!formatterType) {
                formatterType = [];
                formatterType.push(formatterInfo.key1);
            }
            this.setState({ formatter: formatter }); 
            this.setState({ formattericon: formatterInfo.icon, formattershowname: formatterInfo.showname });
            this.props.onChange({ formatter:{formatter,formatterType} });
        }
        
    }
    getFormaterInfo = (formatter, formatterType) => {
        let ftype = "";
        let commonShow = {
            icon: 'icon-edc-common-biaoge-kaishi-changguipxxiala-changguipx',
            key: 'undefined',
            key1: 'common',
            showname: getLabel('521044','常规')
        };
        if (formatterType && formatterType.length > 0) {
            ftype = formatterType[0];
            commonShow = {
                icon: 'icon-edc-common-other',
                key: 'others',
                key1: 'custom',
                showname: getLabel('502465', '自定义')
            }
        }
        let selectedFormmater = formatters.find(d => d.key === formatter || d.key1 == ftype) || commonShow;

        if (ftype == 'date') {
            selectedFormmater = {
                icon: 'icon-edc-common-changriqi',
                key: 'yyyy/m/d;@',
                key1: 'date',
                showname: getLabel('502297', '日期')
            }
        } else if (ftype == 'special') {
            selectedFormmater = {
                icon: 'icon-edc-common-special',
                key: '000000',
                key1: 'special',
                showname: '特殊'
            }
        }

        return selectedFormmater;
    }
    
}